<template>
  <div class="conMain " v-if="isonload">
    <el-card  class="box-card" style="padding: 0px!important;">
        <el-tabs v-model="activeName" >

          <el-tab-pane v-if="item.name=='config'?dev:1"  :label="item.title" :name="item.name"  class="tabcard" v-for="(item,index) in siteList">

              <el-form label-position="right" :model="sub[item.name]" size="medium"  label-width="120px">

                  <div v-for="(row,indext) in item.list">

                    <div   v-if="row.type=='array'" style="margin-bottom: 20px;">
                      <el-form-item  style="margin-bottom: 6px!important;"  v-for="(itcc, itendex) in row.value"   :label="itendex==0?row.title:''"  :key="itendex" :required='row.is_req==1?true:false'>
                          <div class="flex-row" >
                          <div class="wdgroup" style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
                            <el-input  :disabled="row.group=='config' && (itcc.key=='basic' || itcc.key=='config')?true:false" style="width:200px!important;margin-right: 10px;" v-model="sub[item.name][row.name][itendex]['key']"  placeholder="键名"></el-input>
                            <el-input   style="width:200px!important;margin-right: 10px;" v-model="sub[item.name][row.name][itendex]['value']"   placeholder="键值"></el-input>
                            <el-button type="danger" v-show="row.group=='config' && (itcc.key=='basic' || itcc.key=='config')?false:true" plain="" @click.prevent="removeDomain(itcc,index,indext,item.name,row.name)" size="mini"  icon="el-icon-delete"></el-button>
                          </div>
                          <div v-if="dev" v-show="itendex==0?true:false">{ info.{{row.name}} } <i v-show="row.id==1?false:true" class="el-icon-close"  @click="del(row.id,row.title)"></i></div>
                          </div>

                      </el-form-item>
                      <el-button style="margin-left: 120px;" @click="addDomain(index,indext,item.name,row.name)" size="mini">+追加</el-button>
                    </div>

                    <el-form-item :label="row.title" v-else-if="row.type=='string'"   :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-input v-model="sub[item.name][row.name]"  :placeholder="row.tip" ><template slot="append" v-if="row.suffix">{{row.suffix}}</template></el-input>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>
                    <el-form-item :label="row.title" v-else-if="row.type=='number'"  :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-input type="number" v-model.number="sub[item.name][row.name]" :placeholder="row.tip" ><template slot="append" v-if="row.suffix">{{row.suffix}}</template></el-input>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>
                    <el-form-item  :label="row.title" v-else-if="row.type=='text'"  :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-input class="wdgroup" type="textarea" v-model="sub[item.name][row.name]" :placeholder="row.tip" ></el-input>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>

                    <el-form-item :label="row.title" v-else-if="row.type=='radio'"  :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-radio-group class="wdgroup" v-model="sub[item.name][row.name]">
                            <el-radio :label="itendex" v-for="(itcc,itendex) in row.content">{{itcc}}</el-radio>
                        </el-radio-group>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>

                    </el-form-item>
                    <el-form-item :label="row.title" v-else-if="row.type=='checkbox'" :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-checkbox-group class="wdgroup" v-model="sub[item.name][row.name]">
                          <el-checkbox :label="itendex" name="type" v-for="(itcc,itendex) in row.content">{{itcc}}</el-checkbox>
                        </el-checkbox-group>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>

                    <el-form-item :label="row.title" v-else-if="row.type=='select'"  :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-select class="wdgroup" v-model="sub[item.name][row.name]"   placeholder="请选择">
                          <el-option
                            v-for="(item,index) in row.content"
                            :key="index"
                            :label="item"
                            :value="index">
                          </el-option>
                        </el-select>
                        <template slot="append" v-if="row.suffix">{{row.suffix}}</template>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>

                    </el-form-item>

                    <el-form-item :label="row.title" v-else-if="row.type=='selects'"  :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-select class="wdgroup"  v-model="sub[item.name][row.name]"  multiple  placeholder="请选择">
                          <el-option
                            v-for="(item,index) in row.content"
                            :key="index"
                            :label="item"
                            :value="index">
                          </el-option>
                        </el-select>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>
                    <el-form-item :label="row.title" v-else-if="row.type=='switch'" :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <el-switch class="wdgroup"  v-model="sub[item.name][row.name]" inactive-value='0' active-value='1'></el-switch>
                        <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>

                    </el-form-item>
                    <el-form-item :label="row.title" v-else-if="row.type=='datetime'" >
                        <div class="flex-row">
                          <el-date-picker class="wdgroup"
                           v-model="sub[item.name][row.name]"
                           type="datetime"
                           placeholder="选择日期"
                           value-format="yyyy-MM-dd HH:mm:ss"
                           >
                          </el-date-picker>
                          <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                         </div>
                    </el-form-item>
                    <el-form-item :label="row.title" v-else-if="row.type=='datetimerange'" :required='row.is_req==1?true:false'>
                        <div class="flex-row">
                        <el-date-picker class="wdgroup"
                           v-model="sub[item.name][row.name]"
                           type="daterange"
                           placeholder="选择日期"
                           value-format="yyyy-MM-dd"
                           >
                         </el-date-picker>
                         <div v-if="dev">{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                         </div>
                    </el-form-item>

                    <el-form-item :label="row.title" v-else-if="row.type=='image'" :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <div class="upLoadPicBox" @click="selectPic('1',index,item.name,row.name)">
                          <div v-if="sub[item.name][row.name]" class="upictrue"><img :src="sub[item.name][row.name]"></div>
                          <div  v-else class="upLoad">
                            <i class="el-icon-camera cameraIconfont" />
                          </div>
                        </div>
                        <div v-if="dev" >{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>


                    <el-form-item :label="row.title" v-else-if="row.type=='images'" :required='row.is_req==1?true:false'>
                      <div class="flex-row">
                        <div
                          v-for="(item_t,index_t) in sub[item.name][row.name]"
                          :key="index_t"
                          class="upictrue"


                        >
                          <img :src="item_t">
                          <i  class="el-icon-error close-tip btndel" @click="handleRemove(index_t,item.name,row.name)" />
                        </div>

                        <div v-if="sub[item.name][row.name].length < 10" class="uploadCont" title="750*750px">
                          <div class="upLoadPicBox" @click="selectPic('2',index,item.name,row.name)">
                            <div class="upLoad">
                              <i class="el-icon-camera close-tip cameraIconfont" />
                            </div>
                          </div>

                        </div>

                      <div v-if="dev" >{ info.{{row.name}} } <i class="el-icon-close" @click="del(row.id,row.title)"></i></div>
                      </div>
                    </el-form-item>



                  </div>

                  <el-form-item style="margin-top: 30px;" >
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="subForm(item.name)" >确定</el-button>
                  </el-form-item>
              </el-form>
          </el-tab-pane>

          <el-tab-pane label="添加配置项" v-if="dev">
            <el-form style="margin-top: 30px;" ref="ruleForm" size="medium" :model="subt" :rules="rules" label-width="110px" >

              <el-form-item label="配置分类" prop="group">

                <el-select  v-model="subt.group"   placeholder="请选择">
                  <el-option
                    v-for="(item,index) in grouplist"
                    :key="index"
                    :label="item"
                    :value="index">
                  </el-option>
                </el-select>

              </el-form-item>
              <el-form-item label="变量类型" prop="type">
               <el-select  v-model="subt.type"   placeholder="请选择" @change='changetype'>
                 <el-option
                   v-for="(item,index) in typelist"
                   :key="index"
                   :label="item"
                   :value="index"
                   >
                 </el-option>
               </el-select>
              </el-form-item>
              <el-form-item label="变量标题" prop="title">
                <el-input v-model="subt.title" placeholder="请输入变量标题" />
              </el-form-item>
              <el-form-item label="变量名" prop="name">
                <el-input v-model="subt.name" placeholder="不能重复，可填大小写字母及下划线" />
              </el-form-item>
              <el-form-item label="变量值" prop="value" v-show='value_hidden'>
                <el-input v-model="subt.value" placeholder="请输入变量值" />
              </el-form-item>
              <el-form-item label="数据列表" prop="content" v-show='content_hidden'>

                <el-input class="wdgroup" type="textarea" v-model="subt.content"></el-input>

              </el-form-item>


              <el-form-item label="描述" prop="tip" v-show='tip_hidden'>
                <el-input v-model="subt.tip" placeholder="请输入描述" />
              </el-form-item>
              <el-form-item label="后缀" prop="suffix" v-show='suffix_hidden'>
                <el-input v-model="subt.suffix" placeholder="例如：元、%" />
              </el-form-item>

              <el-form-item label="排序" >
                <el-input v-model="subt.weigh" placeholder="数字越大越靠前" />
              </el-form-item>

              <el-form-item label="必填" prop="is_req" >
                  <el-radio-group v-model="subt.is_req">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
              </el-form-item>


              <el-form-item style="margin-top: 30px;" >
                <el-button @click="resettt">重置</el-button>
                <el-button type="primary" @click="subFormtt('ruleForm')" >确定</el-button>
              </el-form-item>

            </el-form>





          </el-tab-pane>
        </el-tabs>
    </el-card>
 </div>
</template>
<script>
  import { config_index,config_edit,config_del,config_add} from '@/api/site'

  export default {
    data() {
      return {
        isonload:false,
        activeName: '',
        siteList:[],
        grouplist:[],
        typelist:[],
        sub:[],
        dev:0,
        subt:{
          group:'',
          type:'',
          title:'',
          name:'',
          value:'',
          content:'value1|title1，value2|title2',
          tip:'',
          suffix:'',
          is_req:"1",
          weigh:0
        },
        content_hidden:false,
        suffix_hidden:false,
        value_hidden:false,
        tip_hidden:false,
        rules: {
          group: [
              { required: true, message: '配置分类不能为空', trigger: 'blur' },
          ],
          type: [
              { required: true, message: '变量类型不能为空', trigger: 'blur' },
          ],
          title: [
              { required: true, message: '变量标题不能为空', trigger: 'blur' },
          ],
          name: [
              { required: true, message: '变量名不能为空', trigger: 'blur' },
          ],

        },
      };
    },
    created() {
        this.getindex()
    },

    methods: {
      // 图片上传
      selectPic (tit,index,name,itname) {
          const _this = this
          this.$modalUpload(function(img) {
              if(tit==='1'){
                  _this.sub[name][itname]=img[0];
              }
              if(tit==='2'){
                  img.map((item) => {
                    if(_this.sub[name][itname]){
                        _this.sub[name][itname].push(item)
                      }else{
                        _this.sub[name][itname]=[item]
                      }

                  });
              }

          },tit)
      },
      //图片移除
      handleRemove (i,name,itname) {
         this.sub[name][itname].splice(i, 1);
      },
      addDomain(index,indext,name,itname) {
          var arr=this.siteList[index]['list'][indext]['value'];
          this.sub[name][itname].push({
              "key":'',
              "value": ''
          });
          arr.push({
              "key":'',
              "value": ''
          });
      },
      removeDomain(item,index,indext,name,itname) {
          var arr=this.siteList[index]['list'][indext]['value'];
          var index = arr.indexOf(item)
          if (index !== -1) {
              arr.splice(index, 1)
              this.sub[name][itname].splice(index, 1)
          }
      },
      getindex(){
         config_index().then(res => {
           if(!this.activeName){
             //默认第一个tab
             this.activeName=res.data.siteList['0'].name
           }
           this.dev=res.data.dev;
           this.sub=res.data.subList;

           this.siteList=res.data.siteList;
           this.isonload=true;
           this.grouplist=res.data.grouplist;
           this.typelist=res.data.typelist;
         })
      },

      reset(){
        this.getindex()
      },
      //数据提交
      subForm(formName) {
          config_edit(this.sub[formName]).then(res => {
              this.$notify({
                  title:'提示',
                  message:res.msg,
                  type: 'success',
                  duration: 2000
              })
              this.getindex();
              this.activeName=formName;
          })
      },
      subFormtt(formName) {
          this.$refs[formName].validate((valid) => {
              if (valid) {
                  config_add(this.subt).then(res => {
                     this.$notify({
                       title:'提示',
                       message:res.msg,
                       type: 'success',
                       duration: 2000
                     })
                      this.resettt();
                      this.getindex()
                  })
              } else {
                return false;
              }
          });
      },
      resettt(){
        if (this.$refs['ruleForm']!==undefined) {
           this.$refs['ruleForm'].resetFields();
        }
      },
      changetype(val){
          if(val=='radio' || val=='checkbox' || val=='select' || val=='selects' || val=='array'){
            this.content_hidden=true;
          }else{
            this.content_hidden=false;
          }
          if(val=='string' || val=='number'){
            this.suffix_hidden=true;
          }else{
            this.suffix_hidden=false;
          }
          if(val=='array'  || val=='image'  || val=='images'){
            this.value_hidden=false;
          }else{
            this.value_hidden=true;
          }
          if(val=='string'  || val=='text'  || val=='number' || val=='select' || val=='selects'){
            this.tip_hidden=true;
          }else{
            this.tip_hidden=false;
          }
      },
      del(id,tilte){
        let _this=this;
        _this.$modalSure('您确定要删除【'+tilte+'】吗?').then(() => {
          config_del({id:id}).then(res => {
            if (res.code === 1) {
              this.$notify({
                title:'提示',
                message:res.msg,
                type: 'success',
                duration: 2000
              })
              this.getindex()
            }
          })
        })


      }
    }
  };
</script>
<style lang="scss" scoped>
  .box-card .tabcard{
      min-height:auto ;
      // width:50%;
      padding:20px 0px 0px 0px;

  }
  .el-card__body {
      padding: 1px 20px!important;
  }
  .el-input{width: 500px!important;}
  .flex-row{display: flex;flex-wrap: wrap;align-items: center;}
  .el-form-item{
    margin-bottom: 18px!important;
  }
  .flex-row div{
      color:#8c8c8c;
      font-weight: 600;
      margin-right: 100px;
      i{
        margin-left: 50px;
        color:red;
      }
      .el-icon-camera{
        margin-left: 0px!important;
        color:#6f6f6f;
      }
      .close-tip{
        margin-left: 0px!important;
      }

  }
  .upictrue{
    margin-right: 10px!important;
  }
  .wdgroup{
    width:500px;
  }
</style>
